<!--
 * @Description: 首页
 * @Version: 1.0
 * @Autor: wq
 * @Date: 2021-08-04 20:45:41
 * @LastEditors: wq
 * @LastEditTime: 2021-08-05 16:10:28
 * @FilePath: \vue_project\mmpt\src\views\Home\index.vue
-->
<template>
  <div class="home">
    <div>
      <el-button class="u-font-20" type="primary" @click="openFullScreen2">
        服务方式
      </el-button>
    </div>
   <div class="u-f u-f-asc" style="width: 100%;">
      <el-button @click="handlePrev">上一页</el-button>
    <div class="parent">
      <el-carousel
        :interval="5000"
        :autoplay="false"
        height="300"
        arrow="never"
        ref="carousel"
      >
        <el-carousel-item v-for="item in 4" :key="item">
          <h3>{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-button @click="handleNext">下一页</el-button>
   </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {};
  },
  methods: {
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
    },
    handlePrev() {
      this.$refs.carousel.prev();
    },
    handleNext() {
      this.$refs.carousel.next();
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;

  .parent {
    width: 60%;
    .el-carousel {
      .el-carousel__item {
        &:nth-child(2n) {
          background-color: #99a9bf;
        }

        &:nth-child(2n + 1) {
          background-color: #d3dce6;
        }
      }
      ::v-deep .el-carousel__indicators {
        display: none;
      }
    }
  }
}
</style>
